<template>
  <view class="flex-col page">
    <template v-if="goods.length == 0">
      <text class="self-center no_title">您的购物车是空的</text>
      <text class="self-center no_msg">快去挑选您喜欢的宝贝吧！</text>
      <view class="flex-col justify-start items-center self-center no_wrapper">
        <text class="no_bt">开始添加</text>
      </view>
    </template>
    <template v-else>
      <view class="flex-col group">
       
        <view class="flex-col self-stretch list">
			<view class="shop-name">
				<label>
					<view class="shop-name-box">
						<radio activeBackgroundColor="#3a7beb" :value="232" color="#3a7beb" />
						<view class="shop-name-text">2343</view>
					</view>
				</label>
			</view>
			
          <view
            class="flex-col justify-start relative mt-20 group_3 list-item"
            v-for="(item, index) in goods"
            :key="index"
          >
            <view class="flex-row justify-between section">
              <view class="flex-col self-center group_4">
                <text class="self-start font text_2">运动护膝</text>
                <text class="self-start font_2 text_3">￥157</text>
                <view class="flex-row items-center self-stretch group_5">
                  <view class="flex-row justify-start items-center image-wrapper">
                    <image class="image_3" src="../../static/wx/84c84c72a760b94481e6dd2d46c39425.png" />
                  </view>
                  <view class="flex-row justify-start items-center image-wrapper">
                    <text class="font_3 text_4">1</text>
                  </view>
                  <view class="flex-row justify-start items-center image-wrapper view">
                    <image class="image_3" src="../../static/wx/63729ab0913c8c02a79961a485666506.png" />
                  </view>
                </view>
              </view>
              <image class="self-start image_4 image_5" src="../../static/wx/b9fe29634dda31a9825d9793005bb650.png" />
            </view>
            <image class="image_2 pos_2" src="../../static/wx/95faf2aebabda330a165c9d4b248958e.png" />
          </view>
        </view>
        <text class="self-start font_4 text_11">添加优惠券兑换码</text>
        <view class="flex-row self-stretch group_9">
          <view class="flex-col justify-start items-start flex-1 text-wrapper">
            
            <input
            class="uni-input font_4 text_12"
            placeholder="输入优惠券兑换码"
          />
          </view>
          <view class="flex-col justify-start items-center shrink-0 text-wrapper_2 ml-19">
            <text class="text_13">确认</text>
          </view>
        </view>
      </view>
      <view class="mt-36 flex-col section_4">
        <view class="flex-row justify-between">
          <text class="font_4">商品数量</text>
          <text class="font_5 text_14">4</text>
        </view>
        <view class="mt-24 flex-row justify-between">
          <text class="font_4">价格</text>
          <text class="font_5">￥260</text>
        </view>
        <view class="mt-24 flex-col">
          <view class="flex-row justify-between group_10">
            <text class="font_4 text_15">运费</text>
            <text class="font_5">￥6</text>
          </view>
          <view class="flex-row justify-between items-center group_11">
            <text class="font_4">合计：</text>
            <text class="font_5">￥266</text>
          </view>
        </view>
        <view class="mt-24 flex-col justify-start items-center text-wrapper_3">
          <text class="font_4 text_16">去结算</text>
        </view>
      </view> </template>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      goods: [1, 2],
    };
  },

  methods: {},
};
</script>

<style scoped lang="css">
	/* @import "@/static/jd/base.scss"; */
	.page {
		padding: 0 56rpx 20rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 8rpx;
	}

	.no_image {
		width: 48rpx;
		height: 44rpx;
	}

	.no_pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.no_text {
		color: #000000;
		font-size: 40rpx;
		font-family: Laila;
		font-weight: 700;
		line-height: 37.96rpx;
	}

	.no_title {
		margin-top: 164rpx;
		color: #2d3142;
		font-size: 48rpx;
		font-family: Laila;
		font-weight: 700;
		line-height: 45.6rpx;
	}

	.no_msg {
		margin-top: 48rpx;
		color: #2d3142;
		font-size: 32rpx;
		font-family: Lantinghei SC;
		line-height: 30.38rpx;
	}

	.no_wrapper {
		margin-top: 72rpx;
		padding: 40rpx 0 44rpx;
		background-color: #3a7beb;
		border-radius: 32rpx;
		box-shadow: 0rpx 8rpx 30rpx #fd878733;
		width: 450rpx;
	}

	.no_bt {
		color: #ffffff;
		font-size: 32rpx;
		font-family: Mukta;
		font-weight: 600;
		line-height: 30.24rpx;
	}


	.ml-19 {
		margin-left: 38rpx;
	}

	.group {
		padding: 0 0rpx;
	}

	.group_2 {
		padding-bottom: 8rpx;
	}

	.image {
		width: 48rpx;
		height: 44rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #000000;
		font-size: 40rpx;
		font-family: Laila;
		font-weight: 700;
		line-height: 37.96rpx;
	}

	.list {
		margin-top: 20rpx;
	}

	.group_3 {
		padding-top: 20rpx;
		height: 237.48rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.section {
		padding: 36rpx 32rpx;
		background-color: #f7f8fc;
		border-radius: 32rpx;
	}

	.group_4 {
		margin-left: 180rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: Lantinghei SC;
		line-height: 26.38rpx;
		color: #2d3142;
	}

	.text_2 {
		width:360rpx;
		line-height: 26.36rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: Mukta;
		line-height: 17.54rpx;
		color: #2d3142;
	}

	.text_3 {
		margin-left: 4rpx;
		margin-top: 16rpx;
		line-height: 17.78rpx;
	}

	.group_5 {
		width:150rpx;
		margin-top: 28rpx;
		padding: 8rpx;
		border-radius: 14.54rpx;
		border-left: solid 1.4rpx #e6e9f1;
		border-right: solid 1.4rpx #e6e9f1;
		border-top: solid 1.4rpx #e6e9f1;
		border-bottom: solid 1.4rpx #e6e9f1;
	}

	.image-wrapper {
		width: 40rpx;
		text-align: center;
		justify-content: center;
	}

	.image_3 {
		width: 40rpx;
		height: 40rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: Mukta;
		line-height: 14.66rpx;
		color: #2d3142;
	}

	.text_4 {
		font-size: 23.28rpx;
	}

	.view {
		margin: 0 4rpx;
	}

	.image_4 {
		width: 26rpx;
		height: 30rpx;
	}

	.image_5 {
		margin-top: 104rpx;
	}

	.image_2 {
		width: 180rpx;
		height: 210rpx;
	}

	.pos_2 {
		position: absolute;
		left: 12rpx;
		top: 0;
	}

	.font_4 {
		font-size: 32rpx;
		font-family: Lantinghei SC;
		line-height: 30.12rpx;
		color: #2d3142;
	}

	.text_11 {
		margin-top: 88rpx;
	}

	.group_9 {
		margin-top: 48rpx;
	}

	.text-wrapper {
		padding: 25rpx 0 32rpx;
		border-radius: 24rpx;
		height: 98rpx;
		border-left: solid 2rpx #e6e9f1;
		border-right: solid 2rpx #e6e9f1;
		border-top: solid 2rpx #e6e9f1;
		border-bottom: solid 2rpx #e6e9f1;
	}

	.text_12 {
		margin-left: 24rpx;
		color: #2d3142;
		line-height: 28rpx;
	}

	.text-wrapper_2 {
		padding: 32rpx 0;
		background-color: #3a7beb;
		border-radius: 32rpx;
		box-shadow: 0rpx 8rpx 30rpx #fd878733;
		width: 186rpx;
		height: 96rpx;
	}

	.text_13 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: Mukta;
		font-weight: 600;
		line-height: 30.2rpx;
	}

	.section_4 {
		padding: 52rpx 56rpx 78rpx;
		background-color: #fbfbfd;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
	}

	.font_5 {
		font-size: 32rpx;
		font-family: Lantinghei SC;
		line-height: 26.38rpx;
		color: #2d3142;
	}

	.text_14 {
		line-height: 25.88rpx;
	}

	.group_10 {
		padding-bottom: 40rpx;
		border-bottom: solid 2rpx #e6e9f1;
	}

	.text_15 {
		line-height: 29.88rpx;
	}

	.group_11 {
		padding-top: 36rpx;
	}

	.text-wrapper_3 {
		margin-right: 4rpx;
		padding: 36rpx 0 44rpx;
		background-color: #3a7beb;
		border-radius: 32rpx;
		box-shadow: 0rpx 8rpx 30rpx #fd878733;
	}

	.text_16 {
		color: #ffffff;
		line-height: 30.38rpx;
	}
	.shop-name-box{
		display: flex;
		width: 100%;
		justify-content:flex-start;
	}
	.shop-name-text{
		font-size:35rpx;
		font-weight:bold;
		width:500rpx;
		color:#3a7beb;
		padding-left: 20rpx;
	}
	.activeBackgroundColor{
		display:flex;
	}
	.uni-checkbox-input-checked,
	.uni-radio-input-checked,
	.uni-switch-input-checked {
		background-color: #0099ff !important;
		border-color: #0099ff !important;
		color: #fff !important;
	}
	/deep/ .uni-radio-input-checked,::v-deep .uni-radio-input-checked{
	border: #0099ff !important;
    background: #0099ff !important;
}
</style>